<template>
    <div class='rank' v-loading="loading" element-loading-text="拼命加载中..." element-loading-background="#fff">
        <el-table :data="songList" :show-header= false @row-click="openDetails">
            <el-table-column  label="">
                <template slot-scope="prope">
                    <img :src="prope.row.imgurl.replace('{size}', '400')" alt="" width="60" height="60">
                    <span>{{prope.row.rankname}}</span>
                </template>
            </el-table-column>
            <el-table-column width="60"> 
                <i class="el-icon-arrow-right"></i> 
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            songList :[],
            loading : true
        };
    },
    created(){
      this.getSongs();
    },
    methods: {
        getSongs(){
            this.$http.get('/proxy/rank/list&json=true').then(({data}) => {
                this.songList = data.rank.list;
                this.loading = false;
            }).catch((err) => {
                this.$message.error('网络波动，刷新下试试尼');
                this.loading = false;
                console.log(err);
            })
        },
        openDetails(row){
            this.$router.push({path: `/rank/list/${row.rankid}`});
        }
    }
}
</script>
<style lang="scss">
.rank .cell {
    display: flex;
    padding: 0 15px;
    padding-right: 0;
    img{margin-right: 10px;}
    span{font-size: 16px;line-height: 60px}
}
</style>
